<template>
  <div>
      
    <van-nav-bar title="全部订单">
      <template #right>
        <van-icon @click="qingkou_fn" name="delete-o" size="23" />
      </template>
    </van-nav-bar>
    <Oheader class="sousuo" />
    <div v-if="xianshi" class="xx">
      <div
        class="all_order"
        v-for="(item, index) in budiness_id_list"
        :key="index"
        @click="shangjia_fn(index)"
      >
        <div class="shangjia_tou">
          <div class="shangjia_img">
            <img class="meituan" :src="meituan" alt="" />
          </div>
          <div class="shangjia_mingcheng">
            {{ budiness_name_list[index] }} >
          </div>
        </div>
        <div class="shangpin">
          <div
            class="shangping_img"
            v-for="(item2, index2) in food_id_list"
            :key="index2"
          >
            <div class="shangping_img_one">
              <van-image
                class="shangping_img_div"
                :src="food_img_list[index2]"
                alt=""
              />
            </div>
            <div class="shangping_img_two">{{ food_name_list[index2] }}</div>
          </div>
        </div>
        <div class="shangping_jiage">
          ￥{{ zong_zhekoujia }} ×{{ zong_quantity }}
        </div>
      </div>
    </div>
    <van-empty
      v-else
        class="custom-image"
        image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
        description="订单为空哟"
      />
  </div>
</template>

<script>
import { Dialog,Toast } from "vant";
import Oheader from "../o_header/search.vue"
export default {
  name: "o_footer",
  data() {
    return {
      user_id: JSON.parse(localStorage.getItem("waimai")).user_id,
      budiness_id_list: [],
      budiness_img_list: [],
      budiness_name_list: [],
      food_id_list: [],
      food_quantity_list: [],
      food_img_list: [],
      food_name_list: [],
      zong_zhekoujia_list: [],
      zong_zhekoujia: "",
      zong_quantity: "",
      meituan: require("@/assets/IMG/美团外卖.png"),
      xianshi: false
    };
  },
  components:{
      Oheader
  },
  mounted() {
    this.axios.get("/get_user_order?a=" + this.user_id).then((res) => {
        if (res.data.data.length == 0) {
        this.xianshi = false
      } else {
          this.xianshi = true
      res.data.data.map((item) => {
        this.budiness_id_list.push(item.budiness_id);
        this.food_quantity_list.push(item.food_quantity);
        this.zong_zhekoujia_list.push(item.zong_zhekoujia);
        this.food_id_list.push(item.food_id);
      });
      this.zong_quantity = this.arr_add(this.food_quantity_list);
      this.zong_zhekoujia = this.arr_add(this.zong_zhekoujia_list);
      this.budiness_id_list = this.quchong(this.budiness_id_list);
      this.budiness_id_list.map((item) => {
        this.axios
          .get("/get_business_one_id?business_id=" + item)
          .then((res) => {
            this.budiness_name_list.push(res.data.data[0].budiness_name);
            this.budiness_img_list.push(res.data.data[0].budiness_headimg);
          });
      });
      this.food_id_list.map((item) => {
        this.axios.get("/get_food_info?a=" + item).then((res) => {
          this.food_img_list.push(res.data.data[0].food_img);
          this.food_name_list.push(res.data.data[0].food_name);
        });
      });
      }
    });
  },
  methods: {
    quchong(arr) {
      var arr2 = [];
      arr.map((item) => {
        if (arr2.indexOf(item) == -1) {
          arr2.push(item);
        }
      });
      return arr2;
    },
    arr_add(arr) {
      let sum = 0;
      arr.map((item) => {
        sum = this.accAdd(sum, item - 0);
      });
      return sum;
    },
    accAdd(arg1, arg2) {
      var r1, r2, m;
      try {
        r1 = arg1.toString().split(".")[1].length;
      } catch (e) {
        r1 = 0;
      }
      try {
        r2 = arg2.toString().split(".")[1].length;
      } catch (e) {
        r2 = 0;
      }
      m = Math.pow(10, Math.max(r1, r2));
      return (arg1 * m + arg2 * m) / m;
    },
    accSub(arg1, arg2) {
      return this.accAdd(arg1, -arg2);
    },
    shangjia_fn(index) {
      this.$router.push({
        name: "shangjia",
        params: { shangjia_id: this.budiness_id_list[index] },
      });
    },
    qingkou_fn() {
        if(this.budiness_id_list.length == 0) {
        Toast("已经很干净了")
        return
      }
      Dialog.confirm({
        title: "提示",
        message: "确定要清空订单吗",
      })
        .then(() => {
          // on confirm
          this.axios
            .get("/delete_user_orde_all?a=" + this.user_id)
            .then((res) => {
              if (res) this.budiness_id_list = [];
              this.xianshi = false
            });
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>




<style scoped>
.sousuo 
.van-nav-bar {
  position: fixed;
  top: 0px;
  width: 100%;
}
.xx {
  margin-top: 10px;
}
.van-icon {
  color: black;
}

/deep/ .van-tabs__nav--line {
  width: 50%;
}
/deep/.van-tabs__wrap {
  background-color: white;
}
.all_order {
  margin-top: 20px;
  height: 160px;
  border-radius: 5px;
  background-color: white;
  padding: 10px 20px;
  width: 85%;
  margin: auto;
}

.shangjia_tou {
  height: 40px;
  display: flex;
}

.meituan {
  height: 30px;
}

/deep/.van-image__img {
  border-radius: 10px;
  width: 100px;
  margin-right: 10px;
}

.shangjia_mingcheng {
  font-size: 20px;
}

.shangpin {
  width: 100%;

  display: flex;
  overflow: scroll;
}

.shangping_jiage {
  width: 100%;
  text-align: right;
}
.custom-image {
    margin-top: 60px;
}
</style>